<template>
	<div class="Word">
		<div id="left-container" class="left-container">
			<div id="left-title">定义数据标签</div>
			<el-input v-model="searchKey1" placeholder="请输入数据标签关键字搜索" size="small" @input="loadData">
				<template slot="prepend">待添加区域：</template>
			</el-input>
			<el-table :data="daiDefinedDataTagJson" border >
				<el-table-column prop="name" label="数据区域"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button type="primary" size="small" @click="addDataTag(scope.row)">添加</el-button>
						<el-button type="danger" size="small" @click="deleteDataTag(scope.row)">删除</el-button>
						<el-button type="info" size="small" @click="locateDataTag(scope.row)">定位</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div id="right-container" class="right-container">
			<div id="podiv" v-html="poHtmlCode"></div>
			<!-- 右侧内容 -->
		</div>
	</div>
</template>

<script>
import request from '@/utils/request';

export default {
	data() {
		return {
			searchKey1: '',
			definedDataTagJson: [], // 服务器端前定义的数据标签
			daiDefinedDataTagJson: [], // 待添加的数据标签
			isFromStart: false,
			lastOpTag: '',
			poHtmlCode: ''
		};
	},
	methods: {
		loadData() {
			// 加载数据的逻辑
			this.searchDataTag(this.definedDataTagJson, this.searchKey1);
		},
		addDataTag(row) {
			// 添加数据标签的逻辑
			pageofficectrl.word.SetTextToSelection(row.name);
		},
		deleteDataTag(row) {
			// 删除数据标签的逻辑
			let selectText = pageofficectrl.word.GetTextFromSelection();
			if (row.name != selectText) {
				alert('请先执行‘' + row.name + '’的定位操作，然后再删除。');
			} else {
				pageofficectrl.word.SetTextToSelection('');
			}
		},
		locateDataTag(row) {
			// 定位数据标签的逻辑
			pageofficectrl.word.SelectionCollapse(0);
			if (this.isFromStart) {
				if (this.lastOpTag == row.name) {
					pageofficectrl.word.HomeKey(6);
				}

				this.isFromStart = false;
			}

			if (!pageofficectrl.word.FindNextText(row.name)) {
				alert('已经搜索到文档末尾。');
				this.isFromStart = true;
			}

			this.lastOpTag = row.name;
		},
		searchDataTag(definedDTJson, kWord1) {
			if (kWord1 != "" && kWord1 != null) {
				let searchDataTagJson = [];//定义一个搜索到的数据的数组

				for (let k = 0; k < definedDTJson.length; k++) {
					if (
						definedDTJson[k].name
							.toLocaleLowerCase()
							.indexOf(kWord1.toLocaleLowerCase()) > -1
					) {
						searchDataTagJson.push(definedDTJson[k]);
					}
				}
				this.daiDefinedDataTagJson = searchDataTagJson;
			} else {
				this.daiDefinedDataTagJson = definedDTJson;
			}

		},
		OnPageOfficeCtrlInit() {
			pageofficectrl.AddCustomToolButton("保存", "Save", 1);
		},
		AfterDocumentOpened() {
			this.loadData();
		},
		Save() {
			pageofficectrl.SaveFilePage = "/DataTagEdit/save";
			pageofficectrl.WebSave();
		},
		fetchData() {
			request({
				url: '/DataTagEdit/Word',
				method: 'get',
			}).then(response => {
				this.poHtmlCode = response.result.poHtml;
				this.definedDataTagJson = response.result.dataTags;
			}).catch(error => {
				console.error('There has been a problem with your fetch operation:', error);
			});
		}
	},
	mounted() {
		this.fetchData();
		window.POPageMounted = this; // 必须
	}
};
</script>

<style scoped>
.Word {
	margin: 0;
	padding: 0;
	display: flex;
}

.left-container {
	width: 470px;
	display: flex;
	flex-direction: column;
	padding: 10px;
	font-size: 12px;
	height: 100vh;
}

.right-container {
	flex: 1;
	padding: 0px;
	height: 100vh;
}

#podiv {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

#left-title {
	text-align: center;
	font-size: 16px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: solid 1px #ccc;
}
</style>
